<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>

</head>
<body>
    <center> <!-- 已经被HTML5弃用 -->
        <!-- 这是一个标题标签，通常用于页面的主要标题 -->
        <h1>百度</h1>

        <!-- 这是一个文本输入框，用户可以在这个输入框中输入文本。
             size属性定义了输入框的宽度，
             height属性定义了输入框的高度 -->
        <!-- <input> 元素的外观和尺寸通常由浏览器的默认样式表定义，
             而不是通过HTML属性直接控制。
             如果你想要自定义<input>元素的外观尺寸，可以使用CSS样式来实现。
             例如，你可以通过添加内联样式或者外部样式表来设置输入框的尺寸。-->
        <!-- <input type="text" size="50" style="height: 20px; width: 100px;"> 百度一下-->

        <!-- <style>
                input[type="text"] {
                    height: 20px;
                    width: 100px;
                }
             </style>
        -->
        <a href="/reg.html">注册</a>
        <a href="/login.html">登录</a>
<!--        <br>-->
        <a href="/userList">用户列表</a>
        <br>
        <a href="/classtable.html">课程表</a>
        <br>
        <a href="writeArticle.html">发表文章</a>
<!--        <br>-->
        <a href="/articleList">文章列表</a>
        <br>
        <input type="text" size="50" value="百度一下">

        <!-- 这是一个换行标签，它会导致元素之后的HTML代码换到新的一行 -->
        <br>

        <!-- 这是一个按钮，当用户点击这个按钮时，会触发一个JavaScript函数，这个函数会弹出一个警告框
             alert -> 警报 -->
        <input type="button" value="百度一下" onclick="alert('点你妹啊!')">


        <!-- 这是一个换行标签，它会导致元素之后的HTML代码换到新的一行 -->
        <br>    <!-- 换行 -->

        <!-- 这是两个单选框，用户只能在这两个选项中选择一个。
             因为它们有相同的name属性，所以它们是一个单选框组，
             在这个组中，只能选择一个 -->
        <input type="radio" name="gender">男 <input type="radio" name="gender">女
        <br>
        <!--
        超链接，或图片等组件在定位本网站其他资源时，指定路径通常以"/"开始。
        这里的"/"表示URL中资源抽象路径中最开始的"/"
        例如:
        http://localhost:8080/index.html
                             ^
                            "/"就是这里
        因此上述URL地址访问index.html页面时，如果该页面上定义了其他超链接，比如:
        <a href="/classtable.html">课程表</a>
        那么点击该超链接时，浏览器实际请求的位置:
        http://localhost:8080/classtable.html

        而SpringBoot项目规定，资源的抽象路径最开始的"/"相当于是项目中src/main/resources中static目录
        因此:
        http://localhost:8080/classtable.html
                             ^这个相当与static目录
        访问的就是static目录下的classtable.html页面了
        -->

         <!-- 这是一个超链接，当用户点击这个链接时，会跳转到指定的URL -->
        <a href="https://www.taobao.com">淘宝</a> <!--超链接-->

        <table border="1">
            <!-- 第一行 -->  <!-- '&nbsp'=空格 -->
            <tr>    <!-- tr:行 -->
                <td>第一列</td>    <!-- td:列 table data -->
                <td>第二列</td>
                <!-- 单元格跨越两列, 占据了前两列的宽度
                     -->
                <td colspan="2" align="center">第三列</td>
<!--                <td>第四列</td>-->
            </tr>
            <!-- 第二行 -->
            <tr>    <!-- 行 -->
                <td>第一列</td>
                <td rowspan="2">第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
            <!-- 第三行 -->
            <tr>    <!-- 行 -->
                <td>第一列</td>
                <!-- <td>第二列</td> 被第二行第二列所占-->
                <td>第三列</td>
                <td>第四列</td>
            </tr>
            <!-- 第四行 -->
            <tr>    <!-- 行 -->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </table>


        <!--
            <h2>我是标题</h2>
            <h3>我是标题</h3>
            <h4>我是标题</h4>
            <h5>我是标题</h5>
        -->

    </center>
</body>
</html>
